import { useState } from 'react';
import { ChevronLeftIcon, ChevronRightIcon, StarIcon } from 'lucide-react';
import { ImageWithLoader } from '../ImageWithLoader';
export function EditorsPicks() {
  const [activeSlide, setActiveSlide] = useState(0);
  const picks = [{
    title: 'Samsung Bespoke 4-Door Refrigerator',
    image: 'https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    rating: 4.8,
    description: 'Customizable panels, flexible temperature zones, and AI-powered energy management make this our top pick for modern kitchens.',
    price: '$2,999',
    compatibility: ['Apple HomeKit', 'Google Home', 'Amazon Alexa']
  }, {
    title: 'LG Smart Dishwasher with QuadWash',
    image: 'https://images.unsplash.com/photo-1584269600464-37b1b58a9fe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    rating: 4.7,
    description: 'Advanced cleaning technology with smart diagnostics and voice control for effortless dish management.',
    price: '$1,199',
    compatibility: ['Google Home', 'Amazon Alexa']
  }, {
    title: 'Miele TwinDos Washing Machine',
    image: 'https://images.unsplash.com/photo-1610557892470-55d9e80c0bce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
    rating: 4.9,
    description: 'Precision dosing system and intelligent fabric detection deliver perfect cleaning results every time.',
    price: '$1,799',
    compatibility: ['Apple HomeKit', 'Amazon Alexa']
  }];
  const nextSlide = () => {
    setActiveSlide(prev => prev === picks.length - 1 ? 0 : prev + 1);
  };
  const prevSlide = () => {
    setActiveSlide(prev => prev === 0 ? picks.length - 1 : prev - 1);
  };
  return <section id="editors-picks" className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center mb-8">
          <div>
            <h2 className="text-3xl font-bold">Editor's Picks</h2>
            <p className="text-gray-600">
              Our most highly recommended products this month
            </p>
          </div>
          <div className="flex space-x-2">
            <button onClick={prevSlide} className="p-2 rounded-full border border-gray-300 hover:bg-[#f8f9fa] transition-colors">
              <ChevronLeftIcon size={20} />
            </button>
            <button onClick={nextSlide} className="p-2 rounded-full border border-gray-300 hover:bg-[#f8f9fa] transition-colors">
              <ChevronRightIcon size={20} />
            </button>
          </div>
        </div>
        <div className="relative overflow-hidden">
          <div className="flex transition-transform duration-500 ease-in-out" style={{
          transform: `translateX(-${activeSlide * 100}%)`
        }}>
            {picks.map((pick, index) => <div key={index} className="w-full flex-shrink-0 px-4">
                <div className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md flex flex-col md:flex-row">
                  <div className="md:w-2/5">
                    <ImageWithLoader src={pick.image} alt={pick.title} className="w-full h-48 md:h-full object-cover" />
                  </div>
                  <div className="p-6 md:w-3/5 flex flex-col">
                    <div className="flex items-center mb-2">
                      <span className="bg-[#d4a373] text-white text-xs font-bold px-2 py-1 rounded mr-2">
                        TOP PICK
                      </span>
                      <div className="flex items-center">
                        <StarIcon size={16} className="text-[#ffd166] fill-[#ffd166]" />
                        <span className="ml-1 text-sm font-semibold">
                          {pick.rating}/5
                        </span>
                      </div>
                    </div>
                    <h3 className="text-xl font-bold mb-3">{pick.title}</h3>
                    <p className="text-gray-600 mb-4 flex-grow">
                      {pick.description}
                    </p>
                    <div className="mb-4">
                      <p className="text-sm text-gray-500 mb-1">
                        Compatible with:
                      </p>
                      <div className="flex flex-wrap gap-2">
                        {pick.compatibility.map(platform => <span key={platform} className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                            {platform}
                          </span>)}
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-xl font-bold">{pick.price}</span>
                      <button className="bg-[#343a40] hover:bg-black text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                        Check Price
                      </button>
                    </div>
                  </div>
                </div>
              </div>)}
          </div>
          <div className="flex justify-center mt-6">
            {picks.map((_, index) => <button key={index} onClick={() => setActiveSlide(index)} className={`w-2 h-2 rounded-full mx-1 ${activeSlide === index ? 'bg-[#d4a373]' : 'bg-gray-300'}`} />)}
          </div>
        </div>
      </div>
    </section>;
}